<template>
	
	<div class="shopcard">
		<navfot></navfot>
		<div id="kong">
			<img class="kong-img" src="../img-shopping/pic@2x.png"/>
			<p class="kong-p">这里没有任何商品呢</p>
			<div @click="zhuye()" class="kong-b"><span class="kong-btn">去首页</span></div>
		</div>
		<div class="shopcard-listBox" v-for="(item,index) in shopcardxinxi">
			
			<a :href="'http://www.ntyouxuan.com/newnt/#/business/shopindex?store='+item.store_id"><h3 class="shopcard-title">
				<i><img src="../img-shopping/icon_dianpu@3x.png"/></i><span>{{item.store_name}}</span><span class="spanxx"><span class="aspan">进入店铺</span><i><img src="../img-shopping/icon_next@3x.png"/></i></span>
			</h3></a>
			
			<ul class="shopcard-list-item-box">
				<li class="shopcard-list-item" v-for="(itemlist,index1) in item.goods">
					<p class="shopcard-huodong" v-if="itemlist.content"><span>满减</span><span v-html="itemlist.content"></span></p>
					<div>
						<router-link :to="{path:'/shopXQ/'+itemlist.goods_id}">
						
							<img :src="'http://www.ntyouxuan.com/'+itemlist.goods_image"/>
						</router-link>
						<div class="shopcard-list-item-xinxi">
							<h3>{{itemlist.goods_name}}</h3>
							<p><span>{{itemlist.specification}}</span></p>
							<div class="shopcard-item-num">
								<span>￥</span>
								<span>{{itemlist.price_detail[0]}}.</span>
								<span>{{itemlist.price_detail[1]}}</span>
								<p>
									<span @click="delitem(itemlist.rec_id,index,index1)"><img src="../img-shopping/icon_del@3x.png"/></span>
									<span @click="shopCardjian(index,index1)"><img src="../img-shopping/icon_-@3x.png"/></span>
									<span>{{itemlist.quantity}}</span>
									<span @click="shopCardjia(index,index1)"><img src="../img-shopping/icon_+@3x.png"/></span>
								</p>
								
							</div>
						</div>	
					</div>
					
				</li>
			</ul>
			<div class="shopcard-jiesuan">
				<span @click="shopcardjiesuan(index)">去结算</span>
				<p><span>合计:</span><span>￥{{item.amount}}</span></p>
				<span>(不含运费)</span>
			</div>
		</div>
		<div class="shopcard-delete-box" v-show="delshow">
			<div class="Sc-delete-ts">
				<p>确定要<span>删除</span>该商品么？</p>
				<span @click="quedingdel()">确定</span>
				<span @click="quxiaodel()">取消</span>
			</div>
		</div>
	</div>
</template>

<script>
import navfot from '@/components/nav'
import shoppingCss from '../css/shopping.css'

var furl = 'http://www.ntyouxuan.com/';
	export default{
		name:"shopping",
		data(){
			return{
				user:'',
				shopcardxinxi:"",
				delshow:false,
				delId:null,
				delindex:null,
				delindex1:null
			}
		},
		components:{navfot},
		methods:{
			shopCardjian:function(index,index1){
				if(this.shopcardxinxi[index].goods[index1].quantity-1>0){
					this.shopcardxinxi[index].goods[index1].quantity=Number(this.shopcardxinxi[index].goods[index1].quantity)-1;
					this.jiajianajax(this.shopcardxinxi[index].goods[index1].quantity,this.shopcardxinxi[index].goods[index1].spec_id,index);
				}
			},
			shopCardjia:function(index,index1){
				if(this.shopcardxinxi[index].goods[index1].quantity+1<=99){
					this.shopcardxinxi[index].goods[index1].quantity=Number(this.shopcardxinxi[index].goods[index1].quantity)+1;
					this.jiajianajax(this.shopcardxinxi[index].goods[index1].quantity,this.shopcardxinxi[index].goods[index1].spec_id,index);
				}
				
			},
			jiajianajax:function(num,id,ind){
				var self=this;
				$.ajax({
					type:"get",
					url:furl+"index.php?app=ajax_cart&act=update_cart",
					data:{'spec_id':id,'quantity':num,'token':self.user},
					dataType:"json",
					success:function(res){
						self.shopcardxinxi[ind].amount=res.retval.cart.amount;
					}
				});
			},
			delitem:function(id,index,index1){
				this.delshow=true;
				this.delId=id;
				this.delindex=index;
				this.delindex1=index1;
			},
			quedingdel:function(){
				var self=this;
				$.ajax({
					type:"get",
					url:furl+"index.php?app=ajax_cart&act=drop_cart",
					data:{'rec_id':self.delId,'token':self.user},
					dataType:"json",
					success:function(res){
						if(self.shopcardxinxi[self.delindex].goods.length==1){
							delete self.shopcardxinxi[self.delindex];	
						}else{
							self.shopcardxinxi[self.delindex].amount=res.retval.cart.amount;
							self.shopcardxinxi[self.delindex].goods.splice(self.delindex1,1);
						}
						self.delshow=false;
					}
				});
				location.reload();
			},
			quxiaodel:function(){
				this.delshow=false;
			},
			zhuye: function() {
				window.location.href = 'http://www.ntyouxuan.com/newnt/#/';
			},
			shopcardjiesuan:function(id){
				console.log(id);
				this.$router.push({path:'/shopDd',query:{'did':id}});
			}
		},
		mounted:function(){
			
			this.user=localStorage.getItem("nt_user");
			var self=this;
			$.ajax({
				type:"post",
				url:furl+"index.php?app=ajax_cart&act=index_cart",
				data:{'token':self.user},
				dataType:"json",
				success:function(res){
					if(res.done){
						self.shopcardxinxi=res.retval.carts;
						
						//console.log(self.shopcardxinxi)
						$("#kong").css("display","none")
					}else{
						$("#kong").css("display","block")
					
					}; 
				}
			});
		}
	}
</script>

<style>
	#kong{
		text-align: center;
		margin: 0 auto;
		margin-top: 2.2rem;
	}
	#kong img{
		width: 3.6rem;
		height: 3.2rem;
	}
	#kong .kong-p{
		font-size: 0.32rem;
		color: #999999;
		margin-top: 0.84rem;
	}
	#kong .kong-b{
		width: 1.8rem;
		height: 0.7rem;
		border:1px solid #fb9722;
		margin-left:2.85rem;
		margin-top: 0.44rem;
		border-radius: 0.35rem;
	}
	#kong .kong-btn{
		font-size: 0.33rem;
		color: #fb9722;
		line-height: 0.7rem;
	}
</style>